<template>
  <div class="enter">
    <div class="top">
      <van-cell
        class="firstCell"
        title="Welcome to"
      />
      <van-cell
        class="secondCell"
        title="ZegoExpress"
      />
    </div>
    <div class="body">
      <van-field
        @click="jumpMain"
        v-model="value1"
        :left-icon="icon_Send"
        :right-icon="send_icon"
        readonly
      />
      <van-field
        @click="jumpHistory"
        v-model="value2"
        :left-icon="home_icon_record"
        :right-icon="send_icon"
        readonly
      />

    </div>
  </div>
</template>
<script>
export default {
  name: 'enter',
  data() {
    return {
      value1: 'Send',
      value2: 'Historical Orders',
      icon_Send: require('assets/image/icon_Send.png'),
      home_icon_record: require('assets/image/home_icon_record@2x.png'),
      send_icon: require('assets/image/icon_enter@2x.png')
    }
  },
  mounted() {},
  methods: {
    jumpMain() {
      this.$emit('closeMainPop', '1')
    },
    jumpHistory() {
      this.$emit('closeMainPop', '2')
    }
  }
}
</script>
<style lang="scss" scoped>
.enter {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  overflow: hidden;
  z-index: 1000;
  .top {
    padding-top: 45px;
    padding-bottom: 45px;
    position: relative;
    left: -100%;
    animation: top-css 0.6s;
    // https://www.imooc.com/article/255983
    animation-fill-mode: forwards;
  }
  @keyframes top-css {
    from {
      left: -100%;
    }
    to {
      left: 0;
    }
  }

  .firstCell {
    &::after {
      border-bottom: none;
    }
    padding-bottom: 0px;
    /deep/ .van-cell__title {
      font-size: 15px;
    }
  }
  .secondCell {
    /deep/ .van-cell__title {
      font-size: 20px;
      font-weight: 800;
    }
  }
  @keyframes body-css {
    from {
      left: 100%;
    }
    to {
      left: 0;
    }
  }
  .body {
    width: 100%;
    box-sizing: border-box;
    padding-left: $padd;
    padding-right: $padd;
    position: relative;
    left: 100%;
    animation: body-css 0.6s;
    // https://www.imooc.com/article/255983
    animation-fill-mode: forwards;
    .van-field {
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 16px;
      padding-bottom: 16px;
      border-radius: 4px;
      background-color: $main-color;
      box-shadow: 0px 1px 5px 0px #0e47a2;
      &::after {
        border-bottom: none;
      }
      /deep/ .van-field__control {
        color: white;
        padding-left: 6px;
        font-size: 16px;
        font-weight: 700;
      }
      /deep/ .van-field__left-icon {
        .van-icon__image {
          width: 26px;
          height: 26px;
        }
      }
      /deep/ .van-field__right-icon {
        .van-icon__image {
          width: 26px;
          height: 26px;
        }
      }
    }
    .van-field:nth-child(1) {
      margin-bottom: 18px;
    }
  }
}
</style>